<template>
	<view class="index-page page">
		<image :src="`${cloudStorage}index/top-bg.png`" mode="widthFix" class="top-bg"></image>
		<CustomNav :isBack="false" color="#000" :topBgColor="topBgColor" title="我的"></CustomNav>
		<view class="user-info-block block" :style="'margin-top:'+mt">
			<view class="user-photo-block">
				<button v-if="user" class="upload-photo-btn" open-type="chooseAvatar" @chooseavatar="changeAvatar" hover-class="none">
					<view class="tips">点击编辑</view>
					<image :src="user.avatar" class="user-photo ps"></image>
				</button>
				<image v-else src="@/static/image/default_photo.png" class="user-photo"></image>
			</view>
			<view v-if="user" class="user-name">
				<template v-if="user.name">{{user.name | filterRealName}}</template>
				<template v-else>微信用户</template>
			</view>
			<button v-else class="user-name" hover-class="none" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">点击登录</button>
		</view>
		<view class="count-block block">
			<view @click="navigate('/page_other/work/my_took')" class="count-item">
				<view class="count FZHZGBJ">{{count.my_took_job}}</view>
				<view class="count-name">我接的活</view>
			</view>
			<view class="line"></view>
			<view @click="navigate('/page_other/work/my_send')" class="count-item">
				<view class="count FZHZGBJ">{{count.my_send_job}}</view>
				<view class="count-name">我发的活</view>
			</view>
			<view class="line"></view>
			<view @click="navigate('/page_other/work/my_collect')" class="count-item">
				<view class="count FZHZGBJ">{{count.my_collect_work}}</view>
				<view class="count-name">我的收藏</view>
			</view>
		</view>
		<view class="menu-block block">
			<view @click="navigate('/page_other/user/certification')" class="menu-item">
				<image src="@/static/image/menu-certification.png" class="menu-icon"></image>
				<view class="menu-name">实名认证<span v-if="user" class="menu-association-status default-font" :class="user.autherized==2?'no-font':'yes-font'">{{user.autherized==2?'未认证':'已认证'}}</span></view>
				<view class="iconfont icon-arrow-right"></view>
			</view>
			<view @click="navigate('/page_other/user/info')" class="menu-item">
				<image src="@/static/image/menu-mine.png" class="menu-icon"></image>
				<view class="menu-name">个人资料</view>
				<view class="iconfont icon-arrow-right"></view>
			</view>
			<view @click="navigate('/page_other/user/skill')" class="menu-item">
				<image src="@/static/image/menu-skill.png" class="menu-icon"></image>
				<view class="menu-name">技能标签</view>
				<view class="iconfont icon-arrow-right"></view>
			</view>
			<view @click="navigate('/page_other/user/enterprise')" class="menu-item">
				<image src="@/static/image/enterprise.png" class="menu-icon"></image>
				<view class="menu-name">关联企业<span class="menu-association-status default-font" :class="count.my_associated_status==='未通过'?'no-font':(count.my_associated_status==='通过'?'yes-font':'')">{{count.my_associated_status}}</span></view>
				<view class="iconfont icon-arrow-right"></view>
			</view>
			<view @click="navigate('/page_other/feedback/index')" class="menu-item">
				<image src="@/static/image/feedback.png" class="menu-icon"></image>
				<view class="menu-name">意见反馈</view>
				<view class="iconfont icon-arrow-right"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getWxLoginCode} from '@/util/user.js'
	import {savePhoneNumberByCode,saveAvatar,getUserStatistic} from '@/api/user.js'
	import {uploadFile} from '@/api/file.js'
	export default{
		data(){
			return{
				topBgColor: 'rgba(0,0,0,0)',
				count:{
					my_took_job:0,
					my_send_job:0,
					my_collect_work:0,
					my_associated_status:'',
				},
				user:null
			}
		},
		onLoad() {
			uni.$on('updateUser',()=>{
				this.setUser()
			})
		},
		onShow() {
			this.setUser()
			if(this.$store.getters.token){
				this.getCount()
			}
		},
		methods:{
			getCount(){
				getUserStatistic().then(res=>{
					this.count=res;
				})
			},
			setUser(){
				this.user=this.$store.getters.user
			},
			changeAvatar(e){
				uploadFile(e.detail.avatarUrl).then(res=>{
					uni.showLoading({
						title:'保存中',
						mask:true
					})
					saveAvatar({avatar:res}).then(()=>{
						this.showToast('保存成功');
						this.$store.dispatch('user/getUser')
					})
				})
			},
			async getPhoneNumber(e){
				if(!e.detail.code){
					this.showToast('您取消了授权');
					return;
				}
				if(!this.$store.getters.token){
					let loginCode=await getWxLoginCode()
					uni.showLoading({
						title:'登录中',
						mask:true,
					})
					await this.$store.dispatch('user/getWxLoginCode',loginCode)
				}
				uni.showLoading({
					title:'登录中',
					mask:true
				})
				savePhoneNumberByCode({code:e.detail.code}).then(()=>{
					this.$store.dispatch('user/getUser')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-page {
		overflow: hidden;

		.top-bg {
			position: absolute;
			z-index: -1;
			width: 100%;
		}

		.block {
			width: $content-width;
		}
		.user-info-block{
			margin: 0 auto;
			display: flex;
			align-items: center;
			.user-photo-block{
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				overflow: hidden;
				.upload-photo-btn{
					width: 100%;
					height: 100%;
					position: relative;
					padding: 0;
					.tips{
						font-size: 20rpx;
						width: 100%;
						position: absolute;
						bottom: 0;
						left: 0;
						color: #fff;
						display: flex;
						justify-content: center;
						align-items: center;
						background: rgba(0, 0, 0, 0.5);
						z-index: 1;
						height: 48rpx;
					}
				}
				.user-photo{
					width: 100%;
					height: 100%;
				}
				.user-photo.ps{
					position: absolute;
					left: 0;
					top: 0;
					
				}
			}
			.user-name{
				font-weight: bold;
				margin-left: 20rpx;
				width: calc(100% - 160rpx);
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
				display: flex;
			}
		}
		.count-block{
			margin: 40rpx auto;
			display: flex;
			align-items: center;
			justify-content: center;
			.count-item{
				flex-grow: 1;
				margin: 0 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.count{
					font-size: 46rpx;
				}
				.count-name{
					font-size: 28rpx;
					margin-top: 10rpx;
					color: #515151;
				}
			}
			.line{
				width: 2px;
				border-radius: 100%;
				height: 40rpx;
				background:rgba(135, 135, 135,.52);
			}
		}
		.menu-block{
			margin: 0 auto;
			background: #fff;
			border-radius: 12px;
			padding:10rpx 30rpx;
			.menu-item{
				display: flex;
				align-items: center;
				width: 100%;
				height: 130rpx;
				.menu-icon{
					width: 50rpx;
					height: 50rpx;
					margin-right: 30rpx;
				}
				.menu-name{
					flex-grow: 1;
				}
				.iconfont{
					font-size: 28rpx;
					color: #999;
				}
				.menu-association-status{
					float: right;
					font-size: 30rpx;
					padding-right: 16rpx;
					font-weight:bold;
				}
				.default-font{
					color: rgba(0,0,0,0.5);
				}
				.yes-font{
					color: #00b26a;
				}
				.no-font{
					color: red;
				}
			}
		}
	}
</style>